import {
  Modal,
  Button,
  Space,
  Table,
  Tooltip,
  Pagination,
  Spin,
  Input,
  
} from "antd";
import { PlusOutlined } from "@ant-design/icons";

import useProcessDefList from "@/hooks/ProcessDefListLogic.jsx";
import DeployProcess from "./DeployProcess.jsx";
import StartProcess  from "./StartProcess.jsx";
import Title from "@/components/Title.jsx";
function ProcessDefList(props) {
  const {
    startProcessModalVisible,
    openStartProcessModal,
    closeStartProcessModal,

    processDefId,
    setKeyWords,
    openDeployModal,
    onDeployModalOk,
    onDeployModalCancel,
    deployModalVisible,
    loading,
    tableData,
    paginationData,
    search,
    onPaginationChange,
    onTableChange,
    columnsData,
  } = useProcessDefList();

  return (
    <div>
      <div style={{ display: "flex",alignItems: "center" }}>
        <Title
          title="Process Defination List"
          style={{
            flex: "0 0 300px",
          }}
        >
          aaabbb
        </Title>

        <div style={{ marginBottom: 8, textAlign: "right", flex: "1 1 auto" }}>
        <Space>
          <Input.Group compact>
            <Input style={{ textAlign:"left",width: 200 }} onChange={(e)=>{setKeyWords(e.target.value)}}/>
            <Button type="primary" onClick={()=>{search(true)}}>
              Search
            </Button>
          </Input.Group>

          <Button icon={<PlusOutlined />} onClick={openDeployModal} />
        </Space>
      </div>
      </div>
      <Spin spinning={loading} tip="Loading...">
        <div className="card card-outline card-info">
          <Table
            pagination={false}
            size="small"
            dataSource={tableData.list}
            columns={columnsData.current}
            rowKey={"procDefId"}
            onChange={onTableChange}
            scroll={{ x: 1300 }}
          />
          <div style={{ textAlign: "right", padding: 8 }}>
            <Pagination
              onChange={onPaginationChange}
              size="small"
              total={paginationData.current.total}
              showTotal={(total) => `Total ${total} items`}
              pageSize={paginationData.current.pageSize}
              current={paginationData.current.current}
              showSizeChanger
              pageSizeOptions={paginationData.current.pageSizeOptions}
            />
          </div>
        </div>
      </Spin>

      <Modal
        width="90%"
        title="Deploy Process"
        open={deployModalVisible}
        onOk={onDeployModalOk}
        onCancel={onDeployModalCancel}
        destroyOnClose={true}
        maskClosable={false}
      >
        <DeployProcess></DeployProcess>
      </Modal>


      <Modal
        width={800}
        title="Start Process"
        open={startProcessModalVisible}
        footer={null}
        onCancel={closeStartProcessModal}
        destroyOnClose={true}
        maskClosable={false}
      >
        <StartProcess onClose={closeStartProcessModal} procDefId={processDefId}></StartProcess>
      </Modal>



      
    </div>
  );
}

export default ProcessDefList;
